<template>
  <div style="width: 256px">
    <CloudButton type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
      <CloudIcon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </CloudButton>
    <CloudMenu
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
    >
      <CloudMenuItem key="1">
        <CloudIcon type="pie-chart" />
        <span>Option 1</span>
      </CloudMenuItem>
      <CloudMenuItem key="2">
        <CloudIcon type="desktop" />
        <span>Option 2</span>
      </CloudMenuItem>
      <CloudMenuItem key="3">
        <CloudIcon type="inbox" />
        <span>Option 3</span>
      </CloudMenuItem>
      <CloudSubMenu key="sub1">
        <span slot="title"><CloudIcon type="mail" /><span>Navigation One</span></span>
        <CloudMenuItem key="5">
          Option 5
        </CloudMenuItem>
        <CloudMenuItem key="6">
          Option 6
        </CloudMenuItem>
        <CloudMenuItem key="7">
          Option 7
        </CloudMenuItem>
        <CloudMenuItem key="8">
          Option 8
        </CloudMenuItem>
      </CloudSubMenu>
      <CloudSubMenu key="sub2">
        <span slot="title"><CloudIcon type="appstore" /><span>Navigation Two</span></span>
        <CloudMenuItem key="9">
          Option 9
        </CloudMenuItem>
        <CloudMenuItem key="10">
          Option 10
        </CloudMenuItem>
        <CloudSubMenu key="sub3" title="Submenu">
          <CloudMenuItem key="11">
            Option 11
          </CloudMenuItem>
          <CloudMenuItem key="12">
            Option 12
          </CloudMenuItem>
        </CloudSubMenu>
      </CloudSubMenu>
    </CloudMenu>
  </div>
</template>

<script>
export default {
  title: '3.缩起内嵌菜单',
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
  },
};
</script>